<template>
  <div class="workspacecc" style="height: 100%">
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fff"
      v-loading="addLoading"
    >
      <el-header
        class="toolbar-wap"
        style="
          height: 35px;
          line-height: 35px;
          width: 980px;
          margin: 0 auto;
          color: rgb(243, 76, 21);
        "
      >
        <!-- <span v-if="msg!=''">
          <svg-icon slot="prefix" icon-class="laba"></svg-icon>
          {{msg}}
        </span>-->

        <van-notice-bar left-icon="volume-o" :text="msg" />
      </el-header>
      <el-main class="page-main" style="height: 100%">
        <div
          class="content"
          style="
            width: 900px;
            margin: 0 auto;
            border: 1px solid #eeeeee;
            border-radius: 6px;
            padding: 22px;
          "
        >
          <p
            style="
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            "
          >
            故障地址
            <el-button
              style="float: right"
              type="text"
              @click="address()"
              size="small"
              v-if="addressList.length > 0"
              >新增地址</el-button
            >
          </p>
          <div v-if="addressList.length > 0">
            <div
              v-for="(item, index) in addressList"
              class="item"
              @click="(val) => funSelectData(item, index)"
              :key="index"
            >
              <span
                :class="item.id == active ? 'userName onUser' : 'userName'"
                style="
                  width: 430px;
                  display: inline-block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #666;
                  padding: 0 8px;
                "
              >
                {{ item.areaName }}/{{ item.addressDetail }}
                <i class="tag">
                  <svg-icon
                    slot="prefix"
                    icon-class="xz"
                    style="font-size: 16px; margin-right: 5px"
                  />
                </i>
              </span>
              <span
                style="
                  margin: 0 30px;
                  display: inline-block;
                  width: 125px;
                  height: 30px;
                  text-align: left;
                  text-indent: 30px;
                  margin-left: 0;
                "
                >{{ item.userName }}</span
              >
              <!-- <span style="display: inline-block;   width: 90px;text-align: center;">{{item.userName}}</span> -->

              <span style="color: #666">{{ resetPhone(item.phone) }}</span>
              <div style="margin-left: 35px">
                <el-button
                  class="btn"
                  type="text"
                  @click.stop="addressDefault(item)"
                  size="small"
                  v-if="item.ifCommon === '0'"
                  >设为默认地址</el-button
                >
                <span
                  v-else
                  style="
                    width: 80px;
                    background: #f34c15;
                    color: #ffffff;
                    font-size: 12px;
                    text-align: center;
                    display: inline-block;
                    padding: 2px 0;
                    margin-right: 10px;
                  "
                  >默认地址</span
                >
                <el-button
                  class="btn"
                  type="text"
                  @click.stop="addressEdit(item)"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  class="btn"
                  type="text"
                  @click.stop="addressRemove(item)"
                  size="small"
                  >删除</el-button
                >
              </div>
            </div>
            <span
              @click="more()"
              v-if="isFlag"
              style="cursor: pointer; color: #666; margin-left: 10px"
            >
              更多地址
              <i class="el-icon-arrow-down"></i>
            </span>
            <span
              v-if="!isFlag && addressList.length > 1 && active != ''"
              @click="shouqi()"
              style="cursor: pointer; color: #666; margin-left: 10px"
            >
              收起地址
              <i class="el-icon-arrow-up"></i>
            </span>
          </div>
          <div v-else style="width: 100%; display: flex">
            <el-button
              style="margin: 0 auto"
              type="danger"
              @click="address()"
              size="small"
              >+新增地址</el-button
            >
          </div>
          <p
            style="
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
              border-top: 1px dashed #eeeeee;
              padding-top: 10px;
            "
          >
            故障信息
          </p>
          <el-form
            :model="form"
            :rules="rules"
            style="width: 650px"
            class="demo-ruleForm"
            label-width="120px"
            ref="form"
          >
            <el-form-item label="故障项目" prop="projectName">
              <el-cascader
                size="small"
                style="width: 100%"
                ref="cascaderProject"
                :options="projectList"
                @change="getScope"
                filterable
                v-model="projectName"
                clearable
              />
            </el-form-item>
            <el-form-item label="故障描述" prop="content">
              <el-input
                type="textarea"
                v-model="form.content"
                maxlength="128"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="故障图片">
              <el-upload
                :class="{ show: uploadDisabled && imgUrl.length > 5 }"
                class="upload-demo"
                action="/api/file/upload"
                list-type="picture-card"
                :data="Imgdata"
                :headers="headers"
                accept="image/*"
                :on-preview="handlePreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
                :on-progress="onProgresspc"
                :before-remove="beforeRemove"
                multiple
                :limit="6"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-row v-if="checkbookTime == 1">
              <el-col :span="12">
                <el-form-item label="预约日期" prop="bookTime">
                  <el-select
                    size="small"
                    @change="evtTime"
                    v-model="form.bookTime"
                    placeholder="请选择"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in timeList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="时间段">
                  <el-select
                    size="small"
                    clearable
                    @change="evtTimeHour"
                    v-model="times"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in HourList"
                      :key="index"
                      :label="item.time"
                      :value="item.time"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              label="报修单位"
              prop="repairDeptName"
              v-if="deptShow == '1'"
            >
              <el-select
                style="width: 100%"
                size="small"
                v-model="form.repairDeptName"
                placeholder="请选择报修单位"
                @change="repairDept"
                value-key="id"
                filterable
                clearable
              >
                <el-option
                  :key="item1.id"
                  :label="item1.name"
                  :value="item1.id"
                  v-for="item1 in deptList"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="无人值守维修"
                  prop="ifOnduty"
                  v-if="checkifOnduty == 1"
                >
                  <el-radio-group v-model="form.ifOnduty">
                    <el-radio label="1">同意</el-radio>
                    <el-radio label="0">不同意</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="报修数量"
                  prop="repairNum"
                  v-if="checkShowNum == 1"
                >
                  <el-input-number v-model="form.repairNum"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="承修单位">
              <el-input
                type="textarea"
                size="small"
                v-model="unitInfo"
                readonly
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer" style="background: #fff; border-top: none">
            <el-button @click="cencal" :disabled="!authRemove">取 消</el-button>
            <el-button
              @click="addBtn('form')"
              type="primary"
              :disabled="!authSave"
              >确定</el-button
            >
          </div>
        </div>
      </el-main>
    </el-container>
    <cataDiaLog
      ref="cataDiaLog"
      @cencal="cencal"
      @getAddressData="getAddressData"
      @selectActive="selectActive"
      @cencaLLoading="cencaLLoading"
    ></cataDiaLog>
  </div>
</template>

<script>
import { settingApi } from "@/api/repair/setting";
import { userCommonAddressApi } from "@/api/repair/userCommonAddress";
import { catalogueApi } from "@/api/repair/index";
import { repairInfoApi } from "@/api/repair/repairInfo";
import cataDiaLog from "@/views/application/repair/catalogue/home/cataDiaLog";
import { validateEmail, validateMobile } from "@/itsoftUI/utils/validate";
import { compression } from "@/itsoftUI/utils/imgCompression";
import Token from "@/itsoftUI/auth/token.js";
export default {
  components: {
    cataDiaLog,
  },
  data() {
    return {
      isFlag: false,
      active: "",
      msg: "",
      deptShow: "",
      checked: false,
      headers: {
        Token: "",
        TokenKey: "",
      },
      authRemove: true,
      authSave: true,
      times: "",
      Imgdata: {
        system: "repair",
      },
      toolButtons: [
        {
          text: "取消",
          auth: "030101",
        },
        {
          text: "确定",
          auth: "030102",
        },
      ],
      uploadDisabled: true,
      value1: "",
      fileList: [],
      imgUrl: [],
      addressList: [],
      proppp: {
        value: "id",
        label: "name",
      },
      areaList: [], //维修区域
      projectList: [], //维修项目
      deptList: [], //单位
      timeList: [], //预约日期
      HourList: [],
      checkifOnduty: "",
      checkbookTime: "",
      checkShowNum: "",
      addLoading: false,
      areaId: "",
      unitInfo: "",
      areaName: "",
      projectName: "",
      form: {
        type: "0",
        ifShielding: "1",
        areaName: "", //维修区域
        address: "", //详细地址
        projectName: "", //故障项目
        bookTime: "", //预约日期
        repairUserName: "", //报修人
        repairUserMobile: "", //联系电话
        repairDeptName: "", //报修单位
        ifOnduty: "1",
        repairNum: 1,
        content: "",
        ifPublish: "1",
        ifUrgent: "0",
        id: "",
        resourcesVOS: [],
        source: "1",
      },
      activeIndex: "",
      deptFlag: true,
      rules: {
        type: [
          {
            required: true,
            message: "请至少选择一个维修类型",
            trigger: "change",
          },
        ],
        areaName: [
          {
            required: true,
            message: "请选择故障区域",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请填写详细地址",
            trigger: "change",
          },
        ],
        projectName: [
          {
            required: true,
            message: "请选择故障项目",
            trigger: "change",
          },
        ],
        repairUserName: [
          {
            required: true,
            message: "请填写预约人",
            trigger: "change",
          },
        ],
        repairUserMobile: [
          {
            required: true,
            validator: validateMobile,
          },
        ],
        repairNum: [
          {
            required: true,
            message: "请填写报修数量",
            trigger: "change",
          },
        ],
        ifOnduty: [
          {
            required: true,
            message: "请选择是否无人值守维修",
            trigger: "change",
          },
        ],
        ifUrgent: [
          {
            required: true,
            message: "请选择紧急程度",
            trigger: "change",
          },
        ],
        serviceScopeName: [
          {
            required: true,
            message: "请至少选择一个服务范围",
            trigger: "change",
          },
        ],
        repairDeptName: [
          {
            required: true,
            message: "请填写报修单位",
            trigger: "change",
          },
        ],

        content: [
          {
            required: true,
            message: "请填写描述信息",
            trigger: "change",
          },
        ],
        ifPublish: [
          {
            required: true,
            message: "请选择是否公开",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.funLoadArea();
    this.funGetDeptList();
    this.funGetBookDate();
    this.funLoadData();
    this.getAddressData();
    // getPremission(this.toolButtons);
  },
  watch: {},
  methods: {
    resetPhone(phone) {
      var str = String(phone);
      var len = str.length;
      if (len >= 7) {
        var reg = str.slice(-8, -4);
        return str.replace(reg, "****");
      } else if (len < 7 && len >= 6) {
        //1234567
        var reg = str.slice(-4, -2);
        return str.replace(reg, "**");
      }
    },
    //新增选中
    selectActive(val) {
      console.log(val);
      this.isFlag = !this.isFlag;
      this.active = val.id;
      this.areaId = val.areaId;
      this.form.areaName = val.areaName;
      this.form.areaId = val.areaId;
      this.form.address = val.addressDetail;
      this.form.repairUserName = val.userName;
      this.form.repairUserMobile = val.phone;
      this.getAreaLlist(this.areaId);
    },
    funSelectData(val, index) {
      this.unitInfo = "";
      this.activeIndex = index;
      //  this.getAddressData();
      // if (this.addressList.length > 1) {
      this.addressList = this.addressList.filter((r, i) => i == index);
      // this.isFlag = !this.isFlag;
      this.active = val.id;
      this.areaId = val.areaId;
      this.form.areaName = val.areaName;
      this.form.areaId = val.areaId;
      this.form.address = val.addressDetail;
      this.form.repairUserName = val.userName;
      this.form.repairUserMobile = val.phone;

      this.getAreaLlist(this.areaId);
      this.isFlag = true;
    },
    getAreaLlist(areaId) {
      catalogueApi.GetProjectByAreaId(areaId).then((res) => {
        if (res.status == "success") {
          this.projectList = res.data;
        }
      });
    },
    shouqi() {
      console.log(this.addressList[this.activeIndex]);
      this.isFlag = !this.isFlag;
      // let list=JSON.parse(JSON.stringify(this.addressList) )
      // this.addressList = this.addressList.filter((r) => r.ifCommon == 1);
      // if (this.addressList.length=='0') this.addressList=list.splice(0,1)
      this.addressList = [this.addressList[this.activeIndex]];
    },
    //更多地址
    more() {
      this.isFlag = !this.isFlag;
      // userCommonAddressApi.List().then((res) => {
      //   this.addressList = res.data;
      // });
      this.getAddressData();
    },
    //设置为默认地址
    addressDefault(item) {
      item.ifCommon = "1";
      userCommonAddressApi.Save(JSON.stringify(item)).then((res) => {
        this.$message.success("设置成功");
        this.getAddressData();
      });
    },
    //地址编辑
    addressEdit(item) {
      userCommonAddressApi.Get(item.id).then((res) => {
        this.$refs.cataDiaLog.addressFormVisible = true;
        this.$refs.cataDiaLog.addressData = res.data;
        this.$refs.cataDiaLog.areaIds = res.data.areaIds.split(",");
      });
    },
    //地址删除
    addressRemove(item) {
      this.$confirm("确定要删除当前的地址吗？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
      })
        .then(() => {
          userCommonAddressApi.Del(item.id).then((res) => {
            if (res.status == "success") {
              this.$message.success("删除成功");
              this.getAddressData();
            }
          });
        })
        .catch(() => {});
    },
    address() {
      this.$refs.cataDiaLog.addressFormVisible = true;

      this.$itsoftUI.getUserInfo().then((res) => {
        this.$refs.cataDiaLog.addressData.userName = res.name;
        this.$refs.cataDiaLog.addressData.phone = res.mobile;
      });
    },
    //用户常用地址
    getAddressData() {
      userCommonAddressApi.List().then((res) => {
        this.addressList = res.data.rows;
        console.log(this.addressList);
        if (this.addressList.length == 1) {
          this.active = this.addressList[0].id;
          this.areaId = this.addressList[0].areaId;
          this.form.areaName = this.addressList[0].areaName;
          this.form.areaId = this.addressList[0].areaId;
          this.form.address = this.addressList[0].addressDetail;
          this.form.repairUserName = this.addressList[0].userName;
          this.form.repairUserMobile = this.addressList[0].phone;
          catalogueApi.GetProjectByAreaId(this.areaId).then((res) => {
            if (res.status == "success") {
              this.projectList = res.data;
              this.selectActive(this.addressList[0]);
            }
          });
        }
      });
    },
    handlePreview(e) {
      window.open(e.url, "_blank");
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        // `当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
        //   files.length + fileList.length
        // } 个文件`
        "当前限制选择6个文件，超出选择范围"
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      this.headers.Token = Token.getToken();
      this.headers.TokenKey = Token.getTokenKey();
      let _this = this;
      return new Promise((resolve, reject) => {
        let image = new Image(),
          resultBlob = "";
        image.src = URL.createObjectURL(file);
        image.onload = () => {
          // 调用方法获取blob格式，方法写在下边
          resultBlob = compression(image, file);
          console.log(resultBlob);
          resolve(resultBlob);
        };
        image.onerror = () => {
          reject();
        };
      });
    },
    handleAvatarSuccess(file, fileList) {
      //图片上传成功
      this.uploadDisabled = true;
      this.imgUrl.push(file.data.path);
    },
    handleRemove(file, fileList) {
      this.uploadDisabled = false;
      if (file.response) {
        for (var i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i] == file.response.data.path) {
            this.fileList.splice(i, 1);
            break;
          }
        }
      } else {
        for (var i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].url == file.url) {
            this.fileList.splice(i, 1);
            break;
          }
        }
      }
      if (file.response) {
        for (var i = 0; i < this.imgUrl.length; i++) {
          if (this.imgUrl[i] == file.response.data.path) {
            this.imgUrl.splice(i, 1);
            break;
          }
        }
      } else {
        for (var i = 0; i < this.imgUrl.length; i++) {
          if (file.url.indexOf(this.imgUrl[i]) != -1) {
            this.imgUrl.splice(i, 1);
            break;
          }
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.error("只允许上传六张图片");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ？`);
    },
    onProgresspc() {
      this.uploadDisabled = true;
    },
    funLoadData() {
      settingApi.List().then((res) => {
        res.data.forEach((el) => {
          if (el.code == "014") {
            this.checkifOnduty = el.value;
          }
          if (el.code == "019") {
            this.checkbookTime = el.value;
          }
          if (el.code == "018") {
            this.checkShowNum = el.value;
          }
          if (el.code == "025") {
            this.deptShow = el.value;
          }
          if (el.code == "007") {
            this.msg = el.value;
          }
        });
      });
    },
    //获取区域
    funLoadArea() {
      catalogueApi.GetAreaTree().then((res) => {
        if (res.status == "success") {
          this.areaList = res.data;
        }
      });
    },
    //维修区域change事件
    getArea(val) {
      let areaId = val[val.length - 1];
      this.form.areaId = areaId;
      this.areaId = areaId;
      this.form.areaName = this.$refs[
        "cascaderArea"
      ].getCheckedNodes()[0].pathLabels[
        this.$refs["cascaderArea"].getCheckedNodes()[0].pathLabels.length - 1
      ];
      catalogueApi.GetProjectByAreaId(areaId).then((res) => {
        if (res.status == "success") {
          this.projectList = res.data;
        }
      });
    },
    //报修单位下拉
    repairDept(val) {
      this.form.repairDeptId = val;
      this.deptList.forEach((el) => {
        if (val == el.id) {
          this.form.repairDeptName = el.name;
        }
      });
    },
    //维修单位
    funGetDeptList() {
      let name = "签单单位";
      repairInfoApi.GetRejectReason(name).then((res) => {
        if (res.status == "success") {
          this.deptList = res.data;
        }
      });
    },
    //获取预约日期
    funGetBookDate() {
      catalogueApi.GetBookDate().then((res) => {
        if (res.status == "success") {
          this.timeList = res.data;
        }
      });
    },
    //预约日期change
    evtTime(val) {
      catalogueApi.GetBookTime(val).then((res) => {
        this.HourList = res.data;
      });
      // var now = this.$moment().locale("zh-cn").format("YYYY-MM-DD");
      // if (val == now) {
      //   var time = this.$moment().locale("zh-cn").format("HH:mm:ss");
      //   this.beginTime = time;
      //   this.timeStart = time;
      // }
    },
    evtTimeHour(val) {
      console.log();
      let times = val.split("-");
      times.forEach((el) => {
        el.replace(/\s*/g, "");
      });
      this.form.startRange = times[0].replace(/\s*/g, "");
      this.form.endRange = times[1].replace(/\s*/g, "");
    },
    //故障项目change事件
    getScope(val) {
      let projectId = val[val.length - 1];
      this.form.projectId = projectId;
      this.form.projectName = this.$refs[
        "cascaderProject"
      ].getCheckedNodes()[0].pathLabels[
        this.$refs["cascaderProject"].getCheckedNodes()[0].pathLabels.length - 1
      ];
      catalogueApi
        .GetAcceptUserByAreaIdAndProjectId(this.areaId, projectId)
        .then((res) => {
          if (res.errorCode === 0) {
            this.addLoading = false;
            // if (res.data.users.length == 0) {
            //   this.$message.error("请联系管理员设置受理人");
            //   this.deptFlag = false;
            //   return false;
            // }
            if (res.message === 0) {
              this.unitInfo = res.data;
              return false;
            }
            console.log(res.data.dept);
            if (res.data.dept !== undefined) {
              this.deptFlag = true;
              this.form.acceptDeptId = res.data.dept.deptId;
              this.form.acceptDeptName = res.data.dept.deptName;
              this.unitInfo =
                "服务单位【" + res.data.dept.deptName + "】,受理人";
              res.data.users.forEach((re) => {
                this.unitInfo += "【" + re.userName + "】,";
              });
              this.unitInfo = this.unitInfo.substr(0, this.unitInfo.length - 1);
            } else {
              this.unitInfo = res.data;
            }
          }
        });
    },
    cencal() {
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
      this.unitInfo = "";
      this.imgUrl = [];
      this.fileList = [];
      this.areaId = "";
      this.areaName = "";
      this.projectName = "";
      this.$router.push("home");
    },
    cencaLLoading() {
      this.addLoading = false;
    },
    addBtn(form) {
      if (!this.deptFlag) {
        this.$message.error("请联系管理员设置受理人");
        return false;
      }
      if (this.active == "") {
        this.$message.error("请选择故障地址");
        return false;
      }
      this.addLoading = true;
      this.imgUrl.forEach((el) => {
        let obj = {
          fileUrl: el,
          fileType: "1",
          statusType: "1",
        };
        this.form.resourcesVOS.push(obj);
      });
      this.form.ifRecord = 0;
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.type == "0") {
            catalogueApi.Save(this.form).then((res) => {
              if (res.status == "success") {
                this.$message.success("提交成功");
                this.addLoading = false;
                this.unitInfo = "";
                this.imgUrl = [];
                this.fileList = [];
                this.areaId = "";
                this.times = "";
                this.areaName = "";
                this.projectName = "";
                this.$refs.form.clearValidate();
                this.$refs.form.resetFields();
                this.$router.push("home");
              }
            });
          }
        } else {
          this.addLoading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.userName {
  display: inline-block;
  width: 125px;
  height: 30px;
  border: 1px solid #ddd;
  line-height: 30px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.onUser {
  border: 2px solid #f34c15;

  .tag {
    display: inline-block;
  }
}

.tag {
  display: none;
  position: absolute;
  right: -6px;
  bottom: -9px;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .btn {
    display: none;
  }

  &:hover {
    .btn {
      display: inline-block;
    }

    background-color: #fff5f2;
  }
}

.on {
  background-color: #f3fffb;

  .btn {
    display: block;
  }
}

.workspacecc {
  .el-radio-button {
    margin-right: 30px;
  }

  .left {
    border-left: 1px solid #dcdfe6;
  }

  .van-notice-bar {
    margin-top: 10px;
    background-color: #fff;
  }

  ::v-deep .show .el-upload--picture-card {
    display: none !important;
  }

  ::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 90px;
  }

  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 90px;
  }

  ::v-deep .el-upload-list--picture-card .el-upload-list__item-status-label i {
    position: absolute;
    top: 0px;
    left: 14px;
  }
}
</style>
